<template>
  <scroll-view :scroll-y="true" class="container">
    <view class="tips" v-if="question_list.length === 0">
      <text>你目前尚未录入试题，现在去录入</text>
    </view>
    <view class="question_list">
      <text class="title">已录入试题</text>
      <rich-text
        v-for="(item, index) in question_list"
        :key="index"
        :nodes="order_with_content(item.order, item.content_front)"
        class="rich_text"
      ></rich-text>
    </view>
    <button type="primary" @click="onClickInputQuestion" size="mini" class="button_content">
      录入
    </button>
  </scroll-view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import type { QuestionItem } from '@/types/home'
import { getPaperOwnerQuestionAPI } from '@/services/home'
// 通用数据
const state = reactive({
  paper_id: 0,
  subject_id: 1,
  title: '',
})
// 合并题号和题目内容
const order_with_content = (order: number, content: string) => {
  return String(order) + '. ' + content
}
// 题目列表，自己录入的某个试卷下的
const question_list = ref<QuestionItem[]>([])
const getQuestionOwnerData = async () => {
  const data = {
    paper_id: state.paper_id,
  }
  const res = await getPaperOwnerQuestionAPI(data)
  // console.log('获取试题成功', res)
  if (Array.isArray(res.results) && res.results.length > 0) {
    question_list.value = res.results
  } else {
    uni.showToast({ icon: 'error', title: '获取失败' })
  }
}
// 单击录入题目
const onClickInputQuestion = () => {
  console.log('录入题目')
  uni.navigateTo({
    url: `step_four_upload_question?paper_id=${state.paper_id}&subject_id=${state.subject_id}&paper_title=${state.title}`,
  })
}
// 页面加载
onLoad(async (opts: any) => {
  state.paper_id = parseInt(opts.paper_id)
  state.subject_id = parseInt(opts.subject_id)
  state.title = opts.paper_title
  await Promise.all([getQuestionOwnerData()])
  console.log('页面加载，指定试卷中的题目', question_list.value)
})
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-flow: column wrap;
  font-size: 30rpx;
  height: 800rpx;
}
.tips {
  font-size: 30rpx;
  display: flex;
  flex-flow: column wrap;
  border-radius: 10rpx;
  border-style: solid;
  border-width: 2rpx;
}
.question_list {
  font-size: 30rpx;
  display: flex;
  flex-flow: column wrap;
  padding: 3rpx;
  margin: 2rpx;
  .title {
    font-size: 27rpx;
    color: green;
  }
}
.rich_text {
  padding: 3rpx;
  margin: 2rpx;
  border-radius: 10rpx;
  border-style: solid;
}
</style>
